<template>
  <div class="container">
    <!--  ==========================左侧==========================  -->
    <!-- 右键菜单 -->
    <el-popover ref="popover" v-model="popoverMenuVisible" placement="bottom-start" width="160"
                :style="curPopoverStyle()" trigger="manual"
    >
      <div class="menu-item" @click="addNode(true)">{{ addNodeDesc }}</div>
      <div class="menu-item" @click="editNode(true)">修改</div>
      <div class="menu-item" @click="editStatus('yes')">启用</div>
      <div class="menu-item" @click="editStatus('no')">停用</div>
      <div class="menu-item" @click="editStatus('del')">删除</div>
    </el-popover>

    <div class="left" style="overflow-y:scroll;overflow-x:hidden;height:100%">
      <div style="font-size: 15px">护理项目维护</div>
      <div class="flexHS-around" style="margin: 10px">
        <el-input type="text" placeholder="请输入内容" v-model="searchText" clearable maxlength="10" show-word-limit>
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <div style="width: 80px;margin-left: 10px">状态</div>
        <el-select v-model="statusValue" placeholder="请选择" @change="handleStatusChange">
          <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </div>
      <!--   左侧树状   -->
      <el-tree class="filter-tree" :data="categoryItems" :props="defaultProps" :default-expand-all="true"
               :highlight-current="true"
               :filter-node-method="filterNode" ref="tree" :check-on-click-node="true"
               @current-change="handleTreeNode" @node-contextmenu="handleRightClick"
               node-key="tKey" :current-node-key="curNodeKey"
      >
        <!-- 使用默认插槽 -->
        <template #default="{ node, data }">
          <div class="custom-node">
            <span v-if="data.categoryId" class="node-label">{{ node.label }}</span>
            <span v-else>{{ node.label }}</span>
          </div>
        </template>
      </el-tree>
    </div>


    <!--  =====================右侧=========================  -->
    <div class="right" style="overflow-y:scroll;overflow-x:hidden;height:100%">
      <div class="right-top" style="overflow-y:scroll;overflow-x:hidden;height:100%;margin: 10px;padding-right: 20px">
        <div style="font-size: 15px;margin-bottom: 10px">项目详情
          <el-button v-if="showSaveItem" @click="handleSaveItem" type="primary">保存</el-button>
        </div>
        <div class="flexH">
          <div class="flexG">
            <div class="flexHL padding10">
              <div style="background: #00afff;width: 2px;height: 14px;margin-right: 5px"/>
              <span>服务介绍</span>
            </div>
            <el-input class="custom-input" style="color: black;" type="textarea" :rows="5" placeholder="请输入内容"
                      v-model="textdesc"
            >
            </el-input>
            <div class="flexHL padding10">
              <div style="background: #00afff;width: 2px;height: 14px;margin-right: 5px"/>
              <span>温馨提示</span>
            </div>
            <el-input class="custom-input" type="textarea" :rows="5" placeholder="请输入内容" v-model="texttip">
            </el-input>
          </div>
          <div class="margin20">
            <div class="flexHL padding10">
              <div style="background: #00afff;width: 2px;height: 14px;margin-right: 5px"/>
              <span>护理项目图片</span>
            </div>
            <template >
              <image-preview :src="imgaUrl" :width="180" :height="180"/>
            </template>
            <!--<img :src="imgaUrl" style="width: 180px;height: 180px">-->
          </div>
        </div>
        <div class="flexHL padding10">
          <div style="background: #00afff;width: 2px;height: 14px;margin-right: 5px"/>
          <span>服务套餐</span>
        </div>
        <div class="flexHL marginB10">
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleComboUpdate('new')"
          >新增
          </el-button>
          <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single"
                     @click="handleComboUpdate('update')"
          >修改
          </el-button>
          <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
                     @click="handleComboUpdate('delete')"
          >删除
          </el-button>
        </div>
        <!--      套餐  -->
        <el-table ref="multipleTable" :data="specifications" highlight-current-row
                  @selection-change="handleSelectionCombo"
        >
          <el-table-column type="index" width="50"/>
          <el-table-column type="selection" width="55" align="center"/>
          <el-table-column label="套餐名称" align="center" prop="specName"/>
          <el-table-column label="原价" align="center" prop="price"/>
          <el-table-column label="现价" align="center" prop="curentPrice"/>
          <el-table-column label="折扣率" align="center" prop="rate"/>
          <el-table-column label="套餐说明" align="center" prop="desc" :show-overflow-tooltip="true"/>
          <el-table-column label="关联耗材包" align="center" prop="packages" width="130" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div v-for="itm in (scope.row.packages)">
                {{ itm.pkgName }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!--  服务套餐维护--- 弹框  -->
    <el-dialog :title="title" :visible.sync="itemComboDailog" width="1000px" append-to-body>
      <div style="display: flex;flex-direction: row;">
        <!--        <el-avatar class="avatarImg"  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" @error="errorHandler"></el-avatar>-->
        <el-form ref="form" :model="curSelectCombo" style="width: 65%" label-width="100px">
          <el-form-item label="套餐名称" prop="curSelectCombo.specName"
                        :rules="[ { required: true, message: '请输入内容', trigger: ['blur', 'change'] }]"
          >
            <el-input v-model="curSelectCombo.specName" placeholder="请输入套餐名称"/>
          </el-form-item>
          <div class="flexHL marginB10">
            <label for="usersId" class="el-form-item__label" style="width: 80px;"><span style="color: red">* </span> 原价</label>
            <el-input-number v-model="curSelectCombo.price" type="number" @change="handleChange" size="small"
                             :precision="2"
                             :min="0.1" :max="2000" label="描述文字"
            ></el-input-number>
            <label for="usersId" class="el-form-item__label" style="width: 80px;"><span style="color: red">* </span> 现价</label>
            <el-input-number v-model="curSelectCombo.curentPrice" type="number" @change="handleChange" size="small"
                             :precision="2"
                             :min="0.1" :max="2000" label="描述文字"
            ></el-input-number>
            <label for="usersId" v-model="curSelectCombo.rate" class="el-form-item__label" style="width: 100px;"
            > 折扣率</label>
            <el-input v-model="curSelectCombo.name" type="number" style="width: 220px" placeholder="请输入折扣率"/>
          </div>
          <el-form-item label="套餐说明" prop="desc" style="color: #BBBBBB">
            <el-input v-model="curSelectCombo.desc" type="textarea" :rows="3" placeholder="请输入套餐说明"/>
          </el-form-item>
        </el-form>
      </div>
      <!--   关联材料包   -->
      <el-button size="medium" type="text" style="color: #000000;font-weight: bold ;margin-top: 20px"
      >关联材料包
      </el-button>
      <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addPackageRow"
      >新增
      </el-button>
      <el-table :data="tablePackageData" ref="table" :key="tableKey" border style="width: 100%">
        <el-table-column type="index" width="50"/>
        <el-table-column type="selection" width="55" align="center"/>
        <!-- 动态列 -->
        <el-table-column v-for="(column, index) in columns" :key="index" :width="column.width" :prop="column.prop"
                         :label="column.label"
        >
          <template #default="scope">
            <!-- 可编辑的输入框 -->
            <div v-if="column.prop==='pkgName'">
              <el-select v-model="scope.row.pkgName" v-if="!!scope.row.editable"
                         @change="handlePackageChange(scope.row)" placeholder="请选择"
              >
                <el-option v-for="its in packageList" :key="its.id" :label="its.pkgName" :value="its.pkgName"/>
              </el-select>
              <span v-else>{{ scope.row[column.prop] }}</span>
            </div>
            <div v-else>
              <el-input v-model="scope.row[column.prop]" v-if="!!scope.row.editable" placeholder="请输入内容"/>
              <span v-else>{{ scope.row[column.prop] }}</span>
            </div>
          </template>
        </el-table-column>
        <!-- 操作列 -->
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="deleteRow(scope.$index)"
            >删除
            </el-button>
            <el-button type="success" plain icon="el-icon-edit" size="mini" @click="updatePackageRow(scope.$index)"
            >修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" align="center" class="dialog-footer">
        <el-button size="medium" @click="itemComboDailog=false">取 消</el-button>
        <el-button type="primary" @click="submitCombo()">提交</el-button>
      </div>
    </el-dialog>
    <!--  新增子节点弹框  -->
    <el-dialog title="新增子节点" width="40%" :visible.sync="addNodeDailog">
      <el-form :model="formNode">
        <el-form-item label="分类名称" label-width="100">
          <el-input v-model="tempCategoryName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addNodeDailog = false">取 消</el-button>
        <el-button type="primary" @click="addNode(false)">确 定</el-button>
      </div>
    </el-dialog>
    <!--  修改分类节点弹框  -->
    <el-dialog title="修改节点" width="40%" :visible.sync="editNodeDailog">
      <el-form :model="formNode">
        <el-form-item label="名称" label-width="100">
          <el-input v-model="tempCategoryName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editNodeDailog = false">取 消</el-button>
        <el-button type="primary" @click="editNode(false)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addCategory, addItem, delCategory, delCombo,
  delItem, getItemDetail, getItemList,
  noCategory, noItem, packagesList, saveCombo, updateCategory, updateItem,
  yesCategory, yesItem
} from '@/api/service/categoryservice'

export default {
  name: 'MainPage',
  data() {
    return {
      // 表格列配置
      columns: [
        { prop: 'pkgName', label: '耗材包', width: 200, editable: true },
        { prop: 'pkgNum', label: '数量', width: 150, editable: true },
        { prop: 'pkgDetail', label: '明细', width: 300, editable: true }
      ],
      // 表格刷新 key
      tableKey: Date.now(),
      tablePackageData: [],
      num: 1,
      formNode: {},
      packageList: [],
      tempCategoryName: '',
      addComboFlag: '',
      addNodeDailog: false,
      editNodeDailog: false,
      popoverMenuVisible: false, // 控制弹框显示
      menuPosition: { x: 0, y: 0 }, // 弹框位置
      selectedNode: {}, // 弹框位置
      title: '服务套餐维护',
      addNodeDesc: '新增子节点',
      itemComboDailog: false,
      searchText: '',
      textdesc: '',
      texttip: '',
      imgaUrl: '',
      curItemId: '',
      curItemName: '',
      showSaveItem: false,
      curSelectCombo: {},
      comboIds: [],
      single: true,
      multiple: true,
      curNodeKey: 2,
      specifications: [],
      statusOptions: [{
        value: '',
        label: '全部'
      }, {
        value: 'normal',
        label: '启用'
      }, {
        value: 'stop',
        label: '停用'
      }],
      statusValue: '',
      filterText: '',
      categoryItems: [],
      defaultProps: {
        children: 'children',
        categoryLink: 'categoryLink',
        label: 'categoryName',
        id: 'categoryId'
      }
    }
  },

  watch: {
    searchText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getList()
    this.packagesList()
  },

  methods: {
    packagesList() {
      packagesList().then(res => {
        this.packageList = res.data //耗材包查询
      })
    },
    getList() {
      let params = {
        'keywords': this.searchText, // 启动 "normal".equals(status)) status = "0";// 停用 ("stop".equals(status)) status = "1";
        'status': this.statusValue
      }
      getItemList(params).then(res => {//修改json结构
        res.data.forEach(data1 => {//第一层
          data1.tKey = data1.categoryId || 0
          if (data1.children) {
            data1.children.forEach(data2 => {//第二层
              this.addItemsToChild(data2)
            })
          }
        })
        this.categoryItems = [...res.data]
        console.log(this.categoryItems)
        //默认第一个
        let bs = true
        for (let item of this.categoryItems[0].children) {
          if (item.children) {
            for (let child of item.children) {
              if (child.id && bs) {
                console.log(child)
                bs = false
                this.curNodeKey = child.tKey //项目id
                this.curItemId = child.id //项目id
              }
            }
          }
        }
        console.log(this.curNodeKey)
        // this.curNodeKey = res.data[0].children[0].categoryId
        this.getDetail(this.curItemId)
      })
    },
    addItemsToChild(data2) {
      let child = data2.children || []
      data2.tKey = data2.categoryId
      if (data2.items && data2.items.length > 0) {
        data2.items.forEach(data3 => {
          data3.categoryName = data3.name
          data3.tKey = data2.categoryId + '' + data3.id //唯一key
          data3.categoryLink = data2.categoryId
          child.push(data3) //项目
          data2.children = child
          if (data3.children) {
            this.addItemsToChild(data3)
          }
        })
      }
    },
    /* 耗材包选择 */
    handlePackageChange(select) {
      console.log(select) // 有id 是修改
      if (select.id) {

      } else { //新建
        this.packageList.forEach(item => {
          if (item.pkgName === select.pkgName) {
            select.pkgNum = item.pkgNum || 1
            select.pkgDetail = item.pkgDetail
            select.id = item.id
            console.log(item)
          }
        })
        this.refreshTable() //强制刷新table
      }
    },
    // 刷新表格
    refreshTable() {
      this.tableKey = Date.now() // 强制刷新表格
      this.$nextTick(() => {
        this.$refs.table.doLayout() // 重新布局表格
      })
    },
    // 添加一行
    addPackageRow() {
      this.tablePackageData = this.tablePackageData || []
      this.tablePackageData.push({ pkgName: '', pkgNum: '', pkgDetail: '', editable: true })
    },
    // 删除一行
    deleteRow(index) {
      //至少3个参数：splice(元素的位置, 删除的元素个数, 要插入的元素，可以是数组)
      this.tablePackageData.splice(index, 1)
    },
    updatePackageRow(index) { //修改
      console.log(index)
      this.tablePackageData = this.tablePackageData || []
      for (let i = 0; i < this.tablePackageData.length; i++) {
        if (i === index) { //可编辑
          this.tablePackageData[i].editable = true
        }
      }
      this.refreshTable() //强制刷新table
      console.log(this.tablePackageData)
    },
    /* Popover弹框 */
    curPopoverStyle() {
      //通过计算获得位置，并减去150
      return 'left: ' + (this.menuPosition.x - 150) + 'px; top: ' + this.menuPosition.y + 'px;position: absolute'
    },
    /* 右键点击事件处理 */
    handleRightClick(event, data, node) {
      event.preventDefault() // 阻止默认右键菜单
      this.selectedNode = data // 保存当前节点数据
      let categoryId = this.selectedNode.categoryId //没有categoryId 取id--->项目
      let id = this.selectedNode.id //是项目--取categoryLink
      let categoryLink = this.selectedNode.categoryLink
      let categoryName = this.selectedNode.categoryName
      console.log('右键点击categoryId:', categoryId + ' id:' + id + '-' + categoryLink + '-' + categoryName)
      this.menuPosition = { x: event.clientX, y: event.clientY } // 设置弹框位置
      this.popoverMenuVisible = true // 显示弹框
      if (categoryId) {
        this.addNodeDesc = '新增子节点'
        this.clickMenuType = 'category'
      }
      if (id) {
        this.addNodeDesc = '新增项目'
        this.clickMenuType = 'item'
        this.getDetail(id) //右键 切换项目
      }
    },
    /* 保存项目 */
    handleSaveItem() {
      let params = {
        'categoryName': this.curItemName,
        'desc': this.textdesc,
        'tip': this.texttip,
        'pic': this.imgaUrl,
        'itemId': this.curItemId
      }
      updateItem(params).then(res => {
        this.$modal.msgSuccess('操作成功')
        this.getDetail(this.curItemId) //刷新
      })
    },
    // 修改节点
    editNode(b) {
      let categoryId = this.selectedNode.categoryId //没有categoryId 取id--->项目
      let id = this.selectedNode.id //是项目--取categoryLink
      let categoryLink = this.selectedNode.categoryLink
      let categoryName = this.selectedNode.categoryName
      this.popoverMenuVisible = false // 关闭右键菜单
      if (id && b) { //都true 项目点修改
        this.showSaveItem = true
        return
      }
      this.editNodeDailog = b  //是否弹框编辑
      if (b) { // ture 分类点修改
        this.tempCategoryName = categoryName
      }
      console.log('修改节点categoryId:', categoryId + '-' + id + '-' + categoryLink + '-' + categoryName)
      if (!b) { // false 修改节点
        if (categoryId && categoryLink) {
          let params = {
            'categoryName': this.tempCategoryName,
            'linkId': categoryLink,
            'categoryId': categoryId
          }
          updateCategory(params).then(res => this.onMsgSuccess())
        }
      }
    },
    // 新增节点
    addNode(b) {
      this.popoverMenuVisible = false // 关闭弹框
      this.popoverMenuVisible = false // 关闭弹框
      let categoryId = this.selectedNode.categoryId //没有categoryId 取id--->项目
      let id = this.selectedNode.id //是项目--取categoryLink
      let categoryLink = this.selectedNode.categoryLink
      console.log('新增节点categoryId:', categoryId + '-' + id + '-' + categoryLink)
      this.addNodeDailog = b  //是否弹框编辑
      if (!b) { // false 即新增分类
        if (categoryId) {
          let params = { 'categoryName': this.tempCategoryName, 'linkId': categoryId }
          addCategory(params).then(res => this.onMsgSuccess())
        }
        if (id) {
          let params = { 'categoryName': this.tempCategoryName, 'categoryId': categoryLink }
          addItem(params).then(res => this.onMsgSuccess())
        }
      }
    },
    onMsgSuccess() {
      this.$modal.msgSuccess('操作成功')
      this.getList() //刷新
    },
    //启用、停用，删除
    editStatus(status) {
      this.popoverMenuVisible = false // 关闭弹框
      let categoryId = this.selectedNode.categoryId //没有categoryId 取id--->项目
      let id = this.selectedNode.id //是项目--取categoryLink
      let categoryLink = this.selectedNode.categoryLink
      let categoryName = this.selectedNode.categoryName
      console.log(this.clickMenuType + '  categoryId:' + categoryId + ' id:' + id + '-' + categoryLink + '-' + categoryName)
      if (this.clickMenuType === 'category' && categoryId) { //分类
        let params = { 'categoryId': categoryId }
        if ('yes' === status) {
          yesCategory(params).then(res => this.onMsgSuccess())
        }
        if ('no' === status) {
          noCategory(params).then(res => this.onMsgSuccess())
        }
        if ('del' === status) {
          delCategory(params).then(res => this.onMsgSuccess())
        }
      }
      if (this.clickMenuType === 'item' && id) { //项目
        let params = { 'itemId': id }
        if ('yes' === status) {
          yesItem(params).then(res => this.onMsgSuccess())
        }
        if ('no' === status) {
          noItem(params).then(res => this.onMsgSuccess())
        }
        if ('del' === status) {
          delItem(params).then(res => this.onMsgSuccess())
        }
      }
    },
    /* 套餐 新建 修改 删除 */
    handleComboUpdate(flag) {
      this.addComboFlag = flag
      if ('new' === flag) {
        this.itemComboDailog = true
        this.curSelectCombo = {}
        this.tablePackageData = []
      }
      if ('update' === flag) {
        this.itemComboDailog = true
        this.tablePackageData = this.curSelectCombo.packages
      }
      if ('delete' === flag) {
        this.$confirm('此操作将删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.comboIds.forEach(id => {
            console.log(id)
            delCombo({
              'itemId': this.curItemId,
              'comboId': id
            }).then(res => {
              this.$modal.msgSuccess('操作成功')
              this.getDetail(this.curItemId) //刷新
            })
          })
        })
      }
    },
    /* 提交套餐 */
    submitCombo() {
      let it = this.curSelectCombo
      console.log(it)
      console.log(it.specName + ' ' + it.curentPrice + ' ' + it.price)
      if (it.specName && it.curentPrice && it.price) {
        let packages = []
        console.log(this.tablePackageData)
        if (this.tablePackageData && this.tablePackageData.length > 0) {
          this.tablePackageData.forEach(item => {
            packages.push({
              'id': item.id || '',
              'num': item.pkgNum,
              'pkgName': item.pkgName
            })
          })
        }
        let params = {// addFlag;//new，update
          'addFlag': this.addComboFlag,
          'comboId': it.id || '',
          'comboName': it.specName,
          'desc': it.desc,
          'itemId': this.curItemId,
          'name': '',
          'nowPrice': it.curentPrice,
          'rate': it.rate,
          'packages': packages,
          'price': it.price
        }
        saveCombo(params).then(res => {
          this.$modal.msgSuccess('操作成功')
          this.itemComboDailog = false
        })
      } else {
        this.$modal.msgSuccess('请检查输入内容！')
      }
    },
    // 套餐-多选框选中数据
    handleSelectionCombo(selection) {
      this.comboIds = selection.map(item => {
        this.curSelectCombo = item
        return item.id
      })
      this.single = selection.length !== 1
      this.multiple = !selection.length
      console.log(this.comboIds)
      console.log(this.curSelectCombo)
    },
    /* 状态选择 */
    handleStatusChange() {
      console.log('handleStatusChange=' + this.statusValue)
      // this.getList()
      this.$refs.tree.filter(this.statusValue)
    },
    /* 项目详情 */
    getDetail(itemId) {
      console.log('itemId=' + itemId)
      this.curItemId = itemId
      let param = { 'itemId': itemId }
      getItemDetail(param).then(res => {
        let data = res.data
        this.textdesc = data.desc
        this.texttip = data.tip
        this.imgaUrl = data.image
        this.curItemName = data.name
        this.specifications = data.specifications
      })
    },
    /* 点击 树节点 */
    handleTreeNode(e) {
      console.log(e)
      let categoryId = e.categoryId //没有categoryId 取id--->项目
      let id = e.id //是项目--取categoryLink
      if (!categoryId && id) categoryId = id
      this.popoverMenuVisible = false // 关闭弹框
      this.getDetail(categoryId)
    },
    /* 输入搜索 树结构 */
    filterNode(value, data) {
      if (!value) return true
      // console.log(value)
      // console.log(data)
      if ('normal' === value || 'stop' === value) { //启动 停用
        return data.code.indexOf(value) !== -1
      }
      return data.categoryName.indexOf(value) !== -1
    }
  }

}

</script>


<style scoped lang="scss">
.container {
  display: flex; /* 使用 Flexbox 布局 */
  height: 100vh; /* 使容器占满视口高度 */
}

.left {
  width: 25%; /* 左侧区域占 30% 宽度 */
  background-color: #ffffff; /* 背景颜色 */
  padding: 10px; /* 内边距 */
}

.right {
  display: flex;
  flex-direction: column; /* 右侧区域使用纵向布局 */
  width: 75%; /* 右侧区域占 80% 宽度 */
}

.matchH {
  height: 100% !important;
}

.matchW {
  width: 100% !important;
}

/* 水平 每个间隔相等*/
.flexHS-around {
  display: flex;
  flex-direction: row !important;
  justify-content: space-around !important;
  align-items: center;
}

/*  水平 两端对齐*/
.flexHS-between {
  display: flex;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center;
}

/* 权重 */
.flexG {
  flex-grow: 1 !important;
}

/* 水平方向 */
.flexH {
  display: flex;
  flex-direction: row !important;
  justify-content: center;
}

.flexHL {
  display: flex;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center;
}

.flexHC {
  display: flex;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center;
}

.flexHR {
  display: flex;
  flex-direction: row !important;
  justify-content: flex-end !important;
  align-items: center;
}

/* 垂直方向 */
.flexV {
  display: flex;
  flex-direction: column !important;
  justify-content: center;
}

.flexVC {
  display: flex;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center;
}

.flexVL {
  display: flex;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start;
}

.flexVBR {
  display: flex;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-end;
}

/* 权重 */
.flexG {
  flex-grow: 1 !important;
}

/* 常用margin边距 */
.margin5 {
  margin: 5px !important;
}

.margin10 {
  margin: 10px !important;
}

.margin20 {
  margin: 20px !important;
}

.margin30 {
  margin: 30px !important;
}

.marginT15 {
  margin-top: 15px !important;
}

.marginT10 {
  margin-top: 10px !important;
}

.marginR10 {
  margin-right: 10px !important;
}

.padding10 {
  padding: 10px !important;
}

.paddingL20 {
  padding-left: 20px !important;
}

.paddingL10 {
  padding-left: 10px !important;
}

.marginB10 {
  margin-bottom: 10px !important;
}

.menu-item {
  margin: 10px 0;
}


.custom-input ::v-deep .el-input__inner {
  color: black !important; /* 使用 !important 确保优先级 */
}

.custom-input ::v-deep .el-textarea__inner {
  color: #000 !important; /* 使用 !important 确保优先级 */
}

.custom-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.node-label {
  font-weight: bold;
}

.node-age {
  color: #666;
}

.cUserFromItem {
  display: flex;
  flex-wrap: wrap;
  color: #00000000;
  padding: 10px 6px;
  flex-grow: 3;
}
</style>

